-
Notifications
You must be signed in to change notification settings - Fork 972
Normalize the sortableTable on about:preferences #10789
Normalize the sortableTable on about:preferences #10789
Conversation
css(styles.alignRight), // sites | ||
css(styles.alignLeft), // include | ||
css(styles.alignRight, styles.column_sites), // sites | ||
css(styles.alignCenter), // include |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
was this done intentionally? we are not using align center anywhere else
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It is intentional (in terms of l10n). I'm taking a screenshot.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@@ -3,7 +3,7 @@ | |||
* You can obtain one at http://mozilla.org/MPL/2.0/. */ | |||
|
|||
const React = require('react') | |||
const {StyleSheet, css} = require('aphrodite') | |||
const {StyleSheet, css} = require('aphrodite/no-important') |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
w00t beautiful
<span className={css( | ||
styles.actionIcons__icon, | ||
styles.actionIcons__icon_pin, | ||
pinned && styles.actionIcons__icon_pin_pinned |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: this could be styles.actionIcons__icon_pin_isPinned
@@ -350,11 +357,18 @@ const styles = StyleSheet.create({ | |||
}, | |||
|
|||
verifiedTd: { | |||
padding: '0 0 0 15px' | |||
// Set the same padding with the padding-top and padding-bottom | |||
paddingRight: '.3ch !important', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I like using ch
units for width/height but for padding seems obscure. Let me know your thoughts on why this
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it sounds fair. I will revisit the padding values of sortable table to see which one works most properly.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
left a comment in https://github.com/brave/browser-laptop/pull/10789/files#r139240607. lmk your thoughts but otherwise this lgtm
@cezaraugusto I've reset the padding with consts: |
blocking now until 0.19.x |
This blocks #10951 |
Additional commits have been added.
Codecov Report
@@ Coverage Diff @@
## master #10789 +/- ##
==========================================
- Coverage 53.38% 53.36% -0.03%
==========================================
Files 274 274
Lines 26020 26019 -1
Branches 4170 4169 -1
==========================================
- Hits 13891 13884 -7
- Misses 12129 12135 +6
|
Addresses #10263 Addresses #10788 Closes #10356 - Polish action icons - Polish verified icon placement - Remove alignRight from the sites column (it should be aligned to the left as default) - Align the include switches to the center - Align the action buttons to the center Test Plan: 1. Visit https://www.youtube.com/user/latenight 2. Open about:preferences#payments 3. Make sure the channel title is aligned to the left
- Replace headerClassNames with headerStyles - Replace columnClassNames with columnStyles on ledgerTable - Replace bodyClassNames with bodyStyles - Remove customCellClassesStr - Remove .th-inner - Set white-space: nowrap to ledgerTable.js Auditors: Test Plan: 1. Run `npm run add-simulated-synopsis-visits 100` 2. Open about:preferences#payments 3. Pin some entries 4. Make sure the table is properly displayed
This blocks #10951
Addresses #10263
Addresses #10788
Closes #10356
Regression Test:
Test Plan:
Test Plan 2:
npm run add-simulated-synopsis-visits 100
Submitter Checklist:
git rebase -i
to squash commits (if needed).Test Plan:
Reviewer Checklist:
Tests